<template>
  <div class="exchange-cash">
    <input type="number" class="cash-num" placeholder="请输入兑换的金额" v-model="cashNum">
    <div class="has-points">
      <span>可用积分:{{parseInt(mPoints) || 0}}</span>
      <span class="all-points" @click="allPoints">全部</span>
    </div>
    <input type="text" class="alipay" placeholder="请输入支付宝或微信账号" v-model="alipay">
    <div class="tip">1积分=1元</div>
    <div class="tip">提交后，我们会在工作日内为您处理到账</div>
    <button class="record" @click="record()">立即提现</button>
  </div> 
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  import { ToastPlugin } from 'vux'
  Vue.use(ToastPlugin)

  export default {
    name: 'exchange-cash',
    props: {
      points: {
        type: String
      }
    },
    data() {
      return {
        mPoints: '',
        cashNum: '',
        alipay: ''
      }
    },
    mounted() {
      
    },
    methods: {
      allPoints() {
        this.cashNum = this.mPoints;
      },
      record() {
        let that = this;
        let _cashNum = this.cashNum.toFixed(2);
        axios.post('/withdraw/addRecord',{
          amount: _cashNum,
          account: that.alipay
        }).then((res) => {
          if (res.code == 200) {
            that.$vux.toast.text('将在一个工作日内到账', 'middle');
            that.mPoints = that.mPoints - that.cashNum;
          }
        })
      }
    },
    watch: {
      points() {
        this.mPoints = this.points;
      },
      cashNum() {
        this.cashNum = parseInt(this.cashNum);
        if (Number(this.cashNum) > Number(this.points)) {
          return this.cashNum = this.points
        }
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .exchange-cash {
    div {
      padding-left: 18px;
      line-height: 38px;
      font-size: 12px;
      color: #999;
    }
    .tip {
      line-height: 20px;
    }
    input {
      outline: none;
      border: none;
      padding-left: 18px;
      width: 100%;
      line-height: 50px;
      font-size: 18px;
      background-color: #fff;
    }
    .has-points {
      .all-points {
        float: right;
        margin-right: 18px;
        color: #3389FF;
      }
    }
    .record {
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      line-height: 50px;
      font-size: 18px;
      text-align: center;
      border: none;
      color: #fff;
      background: #039D4C;
    }
  }
</style>